<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="main-container">
    <a-tabs type="line" v-model="key" auto-switch @change="tabClick">
      <a-tab-pane title="我的短信" key="1">
        <TableBody>
          <template #header>
            <TableHeader ref="tableHeaderRef" :show-filter="false">
              <template #search-content>
                <a-form ref="forms" :model="form">
                  <a-row :gutter="24">
                    <a-col :span="4">
                      <a-form-item field="templateId" hide-label>
                        <a-input
                          v-model.trim="form.templateId"
                          class="width100"
                          placeholder="请输入短信模板"
                          allow-clear
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="btns" hide-label>
                        <a-space :size="15">
                          <a-button type="primary" html-type="submit" @click="doRefresh(1)"
                            ><template #icon> <icon-search /> </template>搜索</a-button
                          >
                          <a-button @click="resetSeach"
                            ><template #icon>
                              <icon-sync theme="outline" size="14" />
                            </template>
                            <!-- Use the default slot to avoid extra spaces -->
                            <template #default>重置</template></a-button
                          >
                        </a-space>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </template>
            </TableHeader>
          </template>
          <template #table-config>
            <a-space :size="15">
              <a-button type="outline" @click="exportMyFn" :loading="loading">
                <template #default>导出</template>
              </a-button>
              <!-- <a-button type="outline" @click="exportMyFn" :loading="loading">
                <template #default>申请签名模板</template>
              </a-button> -->
              <div>
                <span
                  style="margin-right: 10px; color: #3491fa"
                  v-for="item in numList"
                  :key="item.smsType"
                >
                  {{ item.name }}:{{ item.number }}条
                </span>
              </div>
            </a-space>
            <a-space :size="15">
              <TableConfig
                @update-border="onUpdateBorder"
                @update-striped="onUpdateStriped"
                @refresh="doRefresh"
              />
            </a-space>
          </template>
          <template #default>
            <a-table
              :bordered="{ wrapper: true, cell: tables.bordered }"
              :stripe="(tables.striped as boolean)"
              :loading="tables.tableLoading"
              :data="tableColumns.list1"
              :pagination="false"
              :column-resizable="true"
              :rowKey="rowKey"
              :columns="tableColumns.list"
              table-layout-fixed
              hide-expand-button-on-empty
              :default-expand-all-rows="true"
            >
              <template #columns>
                <a-table-column
                  v-for="item of tableColumns.list"
                  :key="item.key"
                  align="left"
                  :title="(item.title as string)"
                  :width="item.width"
                  :data-index="(item.key as string)"
                  :fixed="item.fixed"
                  :ellipsis="true"
                  :tooltip="true"
                >
                  <template v-if="item.key === 'smsSign'" #cell="{ record }">
                    <span v-if="record.smsSign">{{ record.smsSign }}</span
                    ><span v-else>---</span>
                  </template>
                  <template v-if="item.key === 'state'" #cell="{ record }">
                    <a-tag color="blue" v-if="record.state == 0">开启</a-tag>
                    <a-tag color="red" v-else>关闭</a-tag>
                  </template>
                  <template v-if="item.key === 'butten'" #cell="{ record }">
                    <a-space>
                      <a-button
                        v-if="record.error"
                        type="text"
                        status="danger"
                        @click="handleClickInfo(record.error)"
                        >编辑</a-button
                      >
                      <a-button v-else type="text">成功</a-button>
                    </a-space>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </template>
          <template #footer>
            <TableFooter ref="tableFooterRef" :pagination="pagination" />
          </template>
        </TableBody>
      </a-tab-pane>
      <a-tab-pane title="充值记录" key="2">
        <TableBody>
          <template #header>
            <TableHeader ref="tableHeaderRef" :show-filter="false">
              <template #search-content>
                <a-form ref="reForms" :model="reForm">
                  <a-row :gutter="24">
                    <a-col :span="4">
                      <a-form-item field="type" hide-label>
                        <a-select
                          class="width100"
                          v-model="reForm.type"
                          placeholder="请选择短信类型"
                          allow-clear
                        >
                          <a-option v-for="item in type" :key="item.type" :value="item.type">{{
                            item.name
                          }}</a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>

                    <a-col :span="4">
                      <a-form-item field="addTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="reForm.addTime"
                          show-time
                          :disabledDate="changeTraceEndUser"
                          placeholder="请选择开始充值时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          format="YYYY-MM-DD HH:mm:ss"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (reForm.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (reForm.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (reForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (reForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (reForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (reForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (reForm.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (reForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (reForm.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (reForm.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="endTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="reForm.endTime"
                          show-time
                          :disabledDate="changeTraceStartUser"
                          placeholder="请选择结束充值时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (reForm.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (reForm.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (reForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (reForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (reForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (reForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (reForm.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (reForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (reForm.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (reForm.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="btns" hide-label>
                        <a-space :size="15">
                          <a-button type="primary" html-type="submit" @click="doRefreshRe(1)"
                            ><template #icon> <icon-search /> </template>搜索</a-button
                          >
                          <a-button @click="resetRe"
                            ><template #icon>
                              <icon-sync theme="outline" size="14" />
                            </template>
                            <!-- Use the default slot to avoid extra spaces -->
                            <template #default>重置</template></a-button
                          >
                        </a-space>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </template>
            </TableHeader>
          </template>
          <template #table-config>
            <a-space :size="15">
              <a-button type="outline" @click="exportReFn" :loading="loading">
                <!-- Use the default slot to avoid extra spaces -->
                <template #default>导出</template>
              </a-button>
            </a-space>
            <a-space :size="15">
              <TableConfig
                @update-border="onUpdateBorder"
                @update-striped="onUpdateStriped"
                @refresh="doRefreshRe(1)"
              />
            </a-space>
          </template>
          <template #default>
            <a-table
              :bordered="{ wrapper: true, cell: tables.bordered }"
              :stripe="(tables.striped as boolean)"
              :loading="tables.tableLoading"
              :data="tableColumns.list2"
              :pagination="false"
              :column-resizable="true"
              :rowKey="rowKey"
              :columns="tableColumns.userList"
              table-layout-fixed
              hide-expand-button-on-empty
              :default-expand-all-rows="true"
            >
              <template #columns>
                <a-table-column
                  v-for="item of tableColumns.userList"
                  :key="item.key"
                  align="left"
                  :title="(item.title as string)"
                  :width="item.width"
                  :data-index="(item.key as string)"
                  :fixed="item.fixed"
                  :ellipsis="true"
                  :tooltip="true"
                >
                  <template v-if="item.key === 'paymentType'" #cell="{ record }">
                    <span v-if="record.paymentType == 0">微信支付 </span>
                    <span v-else>支付宝支付 </span>
                  </template>
                  <template v-if="item.key === 'state'" #cell="{ record }">
                    <a-tag color="blue" v-if="record.state == 0">成功</a-tag>
                    <a-tag color="gold" v-if="record.state == 1">等待</a-tag>
                    <a-tag color="red" v-if="record.state == 2">失败</a-tag>
                    <a-tag color="red" v-if="record.state == 3">退款</a-tag>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </template>
          <template #footer>
            <TableFooter ref="tableFooterRef" :pagination="paginations" />
          </template>
        </TableBody>
      </a-tab-pane>
      <a-tab-pane title="发送记录" key="3">
        <TableBody>
          <template #header>
            <TableHeader ref="tableHeaderRef" :show-filter="false">
              <template #search-content>
                <a-form ref="sendForms" :model="sendForm">
                  <a-row :gutter="24">
                    <a-col :span="4">
                      <a-form-item field="phone" hide-label>
                        <a-input
                          v-model="sendForm.phone"
                          class="width100"
                          placeholder="请输入手机号"
                          allow-clear
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="type" hide-label>
                        <a-select
                          class="width100"
                          v-model="sendForm.type"
                          placeholder="请选择短信类型"
                          allow-clear
                        >
                          <a-option v-for="item in type" :key="item.type" :value="item.type">{{
                            item.name
                          }}</a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="addTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="sendForm.addTime"
                          show-time
                          :disabledDate="changeTraceEndSend"
                          placeholder="请选择开始发送时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          format="YYYY-MM-DD HH:mm:ss"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (sendForm.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (sendForm.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (sendForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (sendForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (sendForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (sendForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (sendForm.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (sendForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (sendForm.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (sendForm.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="endTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="sendForm.endTime"
                          show-time
                          :disabledDate="changeTraceStartSend"
                          placeholder="请选择结束发送时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (sendForm.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (sendForm.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (sendForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (sendForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (sendForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (sendForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (sendForm.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (sendForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (sendForm.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (sendForm.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="btns" hide-label>
                        <a-space :size="15">
                          <a-button type="primary" html-type="submit" @click="doRefreshSend(1)"
                            ><template #icon> <icon-search /> </template>搜索</a-button
                          >
                          <a-button @click="resetSend"
                            ><template #icon>
                              <icon-sync theme="outline" size="14" />
                            </template>
                            <!-- Use the default slot to avoid extra spaces -->
                            <template #default>重置</template></a-button
                          >
                        </a-space>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </template>
            </TableHeader>
          </template>
          <template #table-config>
            <a-space :size="15">
              <a-button type="outline" @click="exportSendFn" :loading="loading">
                <!-- Use the default slot to avoid extra spaces -->
                <template #default>导出</template>
              </a-button>
            </a-space>
            <a-space :size="15">
              <TableConfig
                @update-border="onUpdateBorder"
                @update-striped="onUpdateStriped"
                @refresh="doRefreshSend(1)"
              />
            </a-space>
          </template>
          <template #default>
            <a-table
              :bordered="{ wrapper: true, cell: tables.bordered }"
              :stripe="(tables.striped as boolean)"
              :loading="tables.tableLoading"
              :data="tableColumns.list3"
              :pagination="false"
              :column-resizable="true"
              :rowKey="rowKey"
              :columns="tableColumns.list3"
              table-layout-fixed
              hide-expand-button-on-empty
              :default-expand-all-rows="true"
            >
              <template #columns>
                <a-table-column
                  v-for="item of tableColumns.sendList"
                  :key="item.key"
                  align="left"
                  :title="(item.title as string)"
                  :width="item.width"
                  :data-index="(item.key as string)"
                  :fixed="item.fixed"
                  :ellipsis="true"
                  :tooltip="true"
                />
              </template>
            </a-table>
          </template>
          <template #footer>
            <TableFooter ref="tableFooterRef" :pagination="paginationse" />
          </template>
        </TableBody>
      </a-tab-pane>
      <a-tab-pane title="国政通记录" key="4">
        <TableBody>
          <template #header>
            <TableHeader ref="tableHeaderRef" :show-filter="false">
              <template #search-content>
                <a-form ref="sendFormss" :model="sendForm1">
                  <a-row :gutter="24">
                    <a-col :span="4">
                      <a-form-item field="name" hide-label>
                        <a-input
                          v-model="sendForm1.name"
                          class="width100"
                          placeholder="请输入姓名"
                          allow-clear
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="phone" hide-label>
                        <a-input
                          v-model="sendForm1.phone"
                          class="width100"
                          placeholder="请输入手机号"
                          allow-clear
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="idCard" hide-label>
                        <a-input
                          v-model="sendForm1.idCard"
                          class="width100"
                          placeholder="请输入身份证号"
                          allow-clear
                        />
                      </a-form-item>
                    </a-col>

                    <a-col :span="4">
                      <a-form-item field="state" hide-label>
                        <a-select
                          class="width100"
                          v-model="sendForm1.state"
                          placeholder="请选择验证结果"
                          allow-clear
                        >
                          <a-option :value="1">成功</a-option>
                          <a-option :value="0">失败</a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="addTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="sendForm1.addTime"
                          show-time
                          :disabledDate="changeTraceEndSend"
                          placeholder="请选择开始验证时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          format="YYYY-MM-DD HH:mm:ss"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (sendForm1.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (sendForm1.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (sendForm1.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (sendForm1.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (sendForm1.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (sendForm1.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (sendForm1.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (sendForm1.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (sendForm1.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (sendForm1.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="endTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="sendForm1.endTime"
                          show-time
                          :disabledDate="changeTraceStartSend"
                          placeholder="请选择结束验证时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (sendForm1.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (sendForm1.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (sendForm1.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (sendForm1.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (sendForm1.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (sendForm1.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (sendForm1.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (sendForm1.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (sendForm1.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (sendForm1.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :offset="20" :span="4">
                      <a-form-item field="btns" content-class=" flex justify-end" hide-label>
                        <a-space :size="15">
                          <a-button type="primary" html-type="submit" @click="doRefreshSends(1)"
                            ><template #icon> <icon-search /> </template>搜索</a-button
                          >
                          <a-button @click="resetSends"
                            ><template #icon>
                              <icon-sync theme="outline" size="14" />
                            </template>
                            <!-- Use the default slot to avoid extra spaces -->
                            <template #default>重置</template></a-button
                          >
                        </a-space>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </template>
            </TableHeader>
          </template>
          <template #table-config>
            <a-space :size="15">
              <a-button type="outline" @click="exportGuoFn" :loading="loading">
                <!-- Use the default slot to avoid extra spaces -->
                <template #default>导出</template>
              </a-button>
            </a-space>
            <a-space :size="15">
              <TableConfig
                @update-border="onUpdateBorder"
                @update-striped="onUpdateStriped"
                @refresh="doRefreshSend(1)"
              />
            </a-space>
          </template>
          <template #default>
            <a-table
              :bordered="{ wrapper: true, cell: tables.bordered }"
              :stripe="(tables.striped as boolean)"
              :loading="tables.tableLoading"
              :data="tableColumns.list4"
              :pagination="false"
              :column-resizable="true"
              :rowKey="rowKey"
              :columns="tableColumns.sendList1"
              table-layout-fixed
              hide-expand-button-on-empty
              :default-expand-all-rows="true"
            >
              <template #columns>
                <a-table-column
                  v-for="item of tableColumns.sendList1"
                  :key="item.key"
                  align="left"
                  :title="(item.title as string)"
                  :width="item.width"
                  :data-index="(item.key as string)"
                  :fixed="item.fixed"
                  :ellipsis="true"
                  :tooltip="true"
                >
                  <template v-if="item.key === 'state'" #cell="{ record }">
                    <a-space>
                      <a-tag v-if="record.state == 0" color="red">失败</a-tag>
                      <a-tag v-else color="arcoblue">成功</a-tag>
                    </a-space>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </template>
          <template #footer>
            <TableFooter ref="tableFooterRef" :pagination="paginations1" />
          </template>
        </TableBody>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
  import {
    myNote,
    reNote,
    sendNote,
    exportSend,
    exportRe,
    exportMy,
    exportGuo,
    listAll,
    getSmsTemplateTextType,
    getCertificationList,
    smsNumber,
  } from '@/api/url'

  import useCommonStore from '@/store/modules/common'

  import { get } from '@/api/http'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'

  import _ from 'lodash-es'
  import { Modal } from '@arco-design/web-vue'

  const table = useTable()

  const pagination = usePagination(doRefresh)
  const paginations = usePagination(doRefreshRe)
  const paginationse = usePagination(doRefreshSend)
  const paginations1 = usePagination(doRefreshSends)
  const type: any = ref([])
  const textType: any = ref([])

  const forms = ref()

  const reForms = ref()
  const sendForms = ref()

  const loading = ref(false)

  const key = ref('1')

  const useCommon = useCommonStore()

  const form = reactive({
    templateId: '', //模板id
  })

  const reForm = reactive({
    type: '',
    addTime: '',
    endTime: '',
  })

  const sendForm = reactive({
    phone: '',
    type: '',
    addTime: '',
    endTime: '',
  })

  const sendForm1 = reactive({
    name: '',
    phone: '',
    idCard: '',
    state: '',
    addTime: '',
    endTime: '',
  })

  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })

  const tableColumns: any = reactive({
    list1: [],
    list2: [],
    list3: [],
    list4: [],
    list: [
      {
        title: '模板id',
        key: 'templateId',
        dataIndex: 'templateId',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '模版名称',
        key: 'templateName',
        dataIndex: 'templateName',
        align: 'center',
        checked: true,
        width: 100,
      },

      {
        title: '模板状态',
        key: 'state',
        dataIndex: 'state',
        align: 'center',
        checked: true,
        width: 100,
      },

      {
        title: '扣除额度',
        key: 'num',
        dataIndex: 'num',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '模板签名',
        key: 'smsSign',
        dataIndex: 'smsSign',
        align: 'center',
        checked: true,
        width: 100,
      },

      {
        title: '短信模板内容',
        key: 'templateText',
        dataIndex: 'templateText',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        align: 'center',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'butten',
        dataIndex: 'butten',
        align: 'center',
        checked: true,
        width: 100,
      },
    ],
    userList: [
      {
        title: '商品名称',
        key: 'smsMerchandiseName',
        dataIndex: 'smsMerchandiseName',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '短信类型',
        key: 'smsMerchandiseName',
        dataIndex: 'smsMerchandiseName',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '订单号',
        key: 'systemOrderNumber',
        dataIndex: 'systemOrderNumber',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '订单数量',
        key: 'smsNumber',
        dataIndex: 'smsNumber',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '剩余数量',
        key: 'number',
        dataIndex: 'number',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '购买金额',
        key: 'money',
        dataIndex: 'money',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '订单状态',
        key: 'state',
        dataIndex: 'state',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '支付类型',
        key: 'paymentType',
        dataIndex: 'paymentType',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '购买时间',
        key: 'createTime',
        dataIndex: 'createTime',
        align: 'center',
        checked: true,
        width: 190,
      },
      {
        title: '支付时间',
        key: 'payTime',
        dataIndex: 'payTime',
        align: 'center',
        checked: true,
        width: 190,
      },
      {
        title: '生效时间',
        key: 'startTime',
        dataIndex: 'startTime',
        align: 'center',
        checked: true,
        width: 190,
      },
      {
        title: '结束时间',
        key: 'endTime',
        dataIndex: 'endTime',
        align: 'center',
        checked: true,
        width: 190,
      },
    ],
    sendList: [
      {
        title: '手机号',
        key: 'phone',
        dataIndex: 'phone',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '发送来源',
        key: 'name',
        dataIndex: 'name',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '短信内容',
        key: 'msg',
        dataIndex: 'msg',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '扣除数量',
        key: 'num',
        dataIndex: 'num',
        align: 'center',
        checked: true,
        width: 100,
      },

      {
        title: '发送时间',
        key: 'sendTime',
        dataIndex: 'sendTime',
        align: 'center',
        checked: true,
        width: 190,
      },
    ],
    sendList1: [
      {
        title: '姓名',
        key: 'name',
        dataIndex: 'name',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '手机号',
        key: 'phone',
        dataIndex: 'phone',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '身份证号',
        key: 'idCard',
        dataIndex: 'idCard',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '验证结果',
        key: 'state',
        dataIndex: 'state',
        align: 'center',
        checked: true,
        width: 100,
      },

      {
        title: '验证时间',
        key: 'sendTime',
        dataIndex: 'sendTime',
        align: 'center',
        checked: true,
        width: 190,
      },
    ],
  })

  const rowKey = useRowKey('id')

  const tabClick = (val: string | number) => {
    loading.value = false
    if (val == '2') {
      // userLists()
      doRefreshRe(1)
      // getTableDepartmentsUser()
    } else if (val == '1') {
      doRefresh(1)
    } else if (val == '3') {
      doRefreshSend(1)
    } else {
      doRefreshSends(1)
    }
  }

  const resetRe = () => {
    reForms.value.resetFields()
    doRefresh(1)
  }

  const resetSeach = () => {
    forms.value.resetFields()
    doRefresh(1)
  }

  const handleClickInfo = (val: any) => {
    Modal.error({
      title: '错误报文',
      content: val,
    })
  }

  const exportMyFn = () => {
    loading.value = true
    useCommon
      .downLoads(exportMy, form, '我的短信列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  const exportReFn = () => {
    loading.value = true
    useCommon
      .downLoads(exportRe, reForm, '充值记录')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  const exportSendFn = () => {
    loading.value = true
    useCommon
      .downLoads(exportSend, sendForm, '发送列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  const exportGuoFn = () => {
    loading.value = true
    useCommon
      .downLoads(exportGuo, sendForm1, '国政通列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  //短信商品
  function listAllFn() {
    get({
      url: listAll,
      data: {},
    }).then((res) => {
      type.value = res.data
    })
  }
  const numList: any = ref({})

  //短信数量
  function smsNumberFn() {
    get({
      url: smsNumber,
      data: {},
    }).then((res) => {
      numList.value = res.data
    })
  }

  //短信模板类型
  function getSmsTemplateTextTypeFn() {
    get({
      url: getSmsTemplateTextType,
      data: {},
    }).then((res) => {
      textType.value = res.data
    })
  }

  //我的短信列表
  function doRefresh(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    get({
      url: myNote,
      data: {
        ...form,
        page: pagination.page,
        size: pagination.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      tableColumns.list1 = res.data.list
      pagination.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  //充值短信列表
  function doRefreshRe(value?: number) {
    tables.tableLoading = true
    if (value) {
      paginations.page = value
    }
    get({
      url: reNote,
      data: {
        ...reForm,
        page: paginations.page,
        size: paginations.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      tableColumns.list2 = res.data.list
      paginations.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  //国政通列表
  function doRefreshSends(value?: number) {
    tables.tableLoading = true
    if (value) {
      paginations1.page = value
    }
    get({
      url: getCertificationList,
      data: {
        ...sendForm1,
        page: paginations1.page,
        size: paginations1.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      tableColumns.list4 = res.data.list
      paginations1.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }
  //发送短信列表
  function doRefreshSend(value?: number) {
    tables.tableLoading = true
    if (value) {
      paginationse.page = value
    }
    get({
      url: sendNote,
      data: {
        ...sendForm,
        page: paginationse.page,
        size: paginationse.pageSize,
      },
    }).then((res) => {
      res.data.list.forEach((item: any) => {
        textType.value.forEach((items: any) => {
          if (item.smsType === items.id) {
            item.name = items.templateTypeName
          }
        })
      })
      tables.tableLoading = false
      tableColumns.list3 = res.data.list
      paginationse.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  //客户重置
  const resetSend = () => {
    sendForms.value.resetFields()
    doRefreshSend(1)
  }
  const sendFormss = ref()
  //客户重置
  const resetSends = () => {
    sendFormss.value.resetFields()
    doRefreshSends(1)
  }

  function onUpdateBorder(isBordered: boolean) {
    tables.bordered = isBordered
  }

  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  // //跟踪API开始时间限制结束时间
  // function changeTraceEnd(time: any) {
  //   return time.getTime() > new Date(form.endTime).getTime() //大于结束时间的不选
  // }
  // //跟踪API结束时间限制开始时间
  // function changeTraceStart(time: any) {
  //   return time.getTime() < new Date(form.addTime).getTime() //小于开始时间的不选
  // }

  //跟踪API开始时间限制结束时间
  function changeTraceEndUser(time: any) {
    return time.getTime() > new Date(reForm.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStartUser(time: any) {
    return time.getTime() < new Date(reForm.addTime).getTime() //小于开始时间的不选
  }

  //跟踪API开始时间限制结束时间
  function changeTraceEndSend(time: any) {
    return time.getTime() > new Date(sendForm.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStartSend(time: any) {
    return time.getTime() < new Date(sendForm.addTime).getTime() //小于开始时间的不选
  }

  onMounted(async () => {
    await doRefresh()
    await listAllFn()
    await getSmsTemplateTextTypeFn()
    await smsNumberFn()
    // await getTableDepartments()
    // await adminLists()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }
  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
    background: none !important;
  }
  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    padding: 20px 0;
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin: 0 20px;
    padding: 0;
    padding-bottom: 5px;
  }

  :deep(.arco-tabs-nav::before) {
    position: static !important;
    height: 0px !important;
  }

  :deep(.arco-tabs-content) {
    padding-top: 20px;
  }

  .box {
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //用省略号显示
    white-space: nowrap;
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    margin-bottom: 20px;

    .button {
      box-sizing: border-box;
      padding-bottom: 5px;
    }
  }

  .action {
    color: #009dff;
    border-bottom: 3px solid #009dff;
  }

  .butten {
    padding: 0px 4px;
  }
</style>
